<!--
 * @Description:登录页面
 * @Version: 2.0
 * @Autor: kafei
 * @Date: 2021-11-18 15:29:35
 * @LastEditors: kafei
 * @LastEditTime: 2021-12-21 14:57:19
-->
<template>
  <el-form
    ref="ruleForm"
    :model="ruleForm"
    :rules="rules"
    label-width="100px"
    class="demo-ruleForm z-w-100"
    size="small"
    style="width:100%"
  >
    <el-form-item
      label="用户名称"
      prop="userName"
    >
      <el-input
        v-model="ruleForm.userName"
        placeholder="请输入用户名称"
      />
    </el-form-item>
    <el-form-item
      label="密码"
      prop="passWord"
    >
      <el-input
        v-model="ruleForm.passWord"
        placeholder="请输入密码"
      />
    </el-form-item>
    <el-button
      type="primary"
      size="small"
      @click="login"
    >
      登录
    </el-button>
  </el-form>
</template>
<script>
import { login, register, userInfo } from '@/api/login'
export default {
  data () {
    return {
      ruleForm: {
        userName: '120707',
        passWord: '123456'
      },
      rules: {
        userName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ],
        passWord: [
          { required: true, message: '请输入用户密码', trigger: 'blur' }
        ]

      }
    }
  },
  methods: {
    async getInfo () {
      const data = await userInfo()
      console.log(data)
    },
    async register () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const result = await register(this.ruleForm)
          if (result.code === '0') {
            const message = result.data.message || '操作成功!'
            this.$message.success(message)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    async login () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const result = await login(this.ruleForm)
          if (result.code === '0') {
            console.log(result, 'result')
            this.$store.commit('user/SET_TOKEN', result.data)
            const message = result.data.message || '操作成功!'
            this.$message.success(message)
            this.$nextTick(() => {
              this.$router.push('/dashboard').catch(err => (console.log(err)))
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
